<template>
	<view class="container">
		<view class="common-title" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="left" @click="clickLeft">
				<uni-icons type="left" size="24"></uni-icons>
				{{title.left}}
			</view>
			<view class="midst">
				{{title.midst}}
			</view>
			<view class="right" @click="clickRight">
				{{title.right}}
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import { ref } from 'vue';
	defineProps({
		title:{
			type: Object,
			default(){
				return{
					left:'',
					midst:'',
					right:''
				}
			}
		}
	});
	const statusBarHeight = ref(0);
	// 获取系统信息，并获取状态栏高度
	uni.getSystemInfo({
	    success: (res) => {
	        statusBarHeight.value = res.statusBarHeight; // 保存状态栏高度
	    },
	});
	
	const commonTitleEmit = defineEmits([
		'clickLeft',
		'clickRight'
	]);
	
	const clickLeft = () => {
		commonTitleEmit('clickLeft');
	};
	
	const clickRight = () => {
		commonTitleEmit('clickRight');
	};
	
</script>

<style lang="scss" scoped>
	.common-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 700rpx;
		height: 44px;
		padding: 0 30rpx 0 20rpx;
		background-color: #f8f8f8;
		.left {
		    width: 130rpx; /* 设置 .left 的宽度为 20rpx */
		    display: flex;
		    align-items: center;
		    text-align: left; /* 左侧文本左对齐 */
		}
		
		.midst {
		    flex: 1; /* 填充剩余空间 */
		    text-align: center; /* 文本居中 */
		}
		
		.right {
		    width: 130rpx;
		    text-align: right; /* 右侧文本右对齐 */
		}
	}
</style>